import React, { Component } from 'react';
import {connect} from 'react-redux'
class TodoList extends Component {
    render() { 
        let {inputValue,list,clickBtn,inputChange}=this.props
        return (
            <div>
                <div>
                    <input 
                        value={inputValue}
                        placeholder="请输入"
                        onChange={inputChange}
                        ></input>
                    <button onClick={clickBtn}>提交</button>
                </div>
                <ul>
                    {
                        list.map((item,index)=>{
                            return (
                                <li key={index}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}
//自定义映射函数，传入的参数state是store中的state,返回的就是这个组件接收到的props对象
const stateToProps=(state)=>{
    return {
        inputValue:state.inputValue,
        list:state.list
        //因为目前本组件只是用到inputValue这个值，所以只从store中取这个值，正常情况下可以取很多值
    }
}
const dispatchToProps=(dispatch)=>{
    return {
        inputChange(e){
            const action={
                type:'CHANGE_INPUT',
                value:e.target.value
            }
            dispatch(action)
        },
        clickBtn(){
            const action={
                type:'ADD_ITEM'
            }
            dispatch(action)
        }
    }
}
//连接函数，第一个参数就是自定义的映射函数，把store中的state映射到组件TodoList的参数props上
export default connect(stateToProps,dispatchToProps)(TodoList);